<template>
  <div class="todoapp">
    <TodoHeader></TodoHeader>
    <TodoMain></TodoMain>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
// 1.安装 Vuex ，配置 store
// 2.把TodoMain组件中的数据，从 Vuex 中读出
// 3.添加功能
// 4.删除功能
// 4.1准备 mutations , 通过下标来删除（数组.splice(下标,1)）
// 4.2调用 mutations
// 5.统计数量
// 5.1准备getters
// 6.筛选
// 7.清除已完成
// 8.切换 全选中 / 全不选中
// 9.本地存储

// 引入组件
import "./styles/base.css";
import "./styles/index.css";

import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  // 注册组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  name: "TodolistApp",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
</style>